<style scoped lang="scss">
    .xy-picker {
        .label {
            justify-content: space-between;
        }
    }
	.select {
		width: 100%;
		height: 30px;
	}
</style>
<template>
    <picker class="xy-picker" @change="bindPickerChange" :range-key="labelName" mode="selector" :value="index" :range="options">
    	<view class="label flex">
            <view>{{options[this.index][this.labelName]}}</view>
            <view class="xyicon xyicon-down"></view>
        </view>
	</picker>
</template>
<script>
export default {
    name: 'XyPicker',
    props: {
		value: {
            type: [Number, String],
            default: ''
        },
		options: {
            type: Array,
			default: []
		},
        labelName: {
            type: String,
            default: 'title'
        },
        valueName: {
            type: String,
            default: 'value'
        }
    },
    data() {
        return {
			index: 0
        }
    },
    created: function () {
		for (var i = 0; i < this.options.length; i++) {
			if (this.options[i][this.valueName] == this.value) {
				this.index = i;
			}
		}
    },
    methods: {
		bindPickerChange: function(e) {
			this.index = e.target.value;
			this.$emit('input', this.options[this.index][this.valueName]);
		}
    }
}
</script>
